<template>
  <div>
    <div class="top_parent">
      <img
        src="../../assets/image/column/cosult_banner.png"
        style="width:100%"
        alt
      />
      <div class="bread">
        <p v-if="$route.query.orderId == '新闻资讯'">
          <router-link to="/">首页</router-link>》咨讯 》新闻资讯
        </p>
        <p v-if="$route.query.orderId == '活动公告'">
          <router-link to="/">首页</router-link>》咨讯 》活动公告
        </p>
        <p v-if="$route.query.orderId == '馆务公开'">
          <router-link to="/">首页</router-link>》咨讯 》馆务公开
        </p>
        <p v-if="$route.query.orderId == '文博动态'">
          <router-link to="/">首页</router-link>》咨讯 》文博动态
        </p>
        <p v-if="$route.query.orderId == '大事记'">
          <router-link to="/">首页</router-link>》咨讯 》大事记
        </p>
      </div>
    </div>
    <div class="bg_person">
      <div class="content gwgk">
        <div class="left">
          <ul>
            <li
              @click="tiaoz1(index + 1)"
              v-for="(item, index) of nav"
              :key="index"
            >
              <!-- <router-link :to="zhiyuanzhezhijia"> -->
              <span :class="{ blue: $route.query.orderId == item.name }">
                {{ item.name }}
              </span>
              <!-- </router-link> -->
            </li>
          </ul>
        </div>

        <div class="right">
          <router-view></router-view>
        </div>
        <div></div>
      </div>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      choose: "",
      sort: "xinwenzixun",
      nav: [
        {
          name: "新闻资讯"
        },
        {
          name: "活动公告"
        },
        {
          name: "馆务公开"
        },
        {
          name: "文博动态"
        },
        {
          name: "大事记"
        }
      ],
      index: 1
    };
  },
  components: {
    foot2: foot2
  },

  methods: {
    tiaoz1(i) {
      console.log(i);
      // this.$router.push(0)
      if (i == 1 || i == 2 || i == 3 || i == 4) {
        if (i == 1) {
          this.sort = "xinwenzixun";
          this.orderId = "新闻资讯";
        } else if (i == 2) {
          this.sort = "huodonggonggao";
          this.orderId = "活动公告";
        } else if (i == 3) {
          this.sort = "guanwugongkai";
          this.orderId = "馆务公开";
        } else if (i == 4) {
          this.sort = "wenbodongtai";
          this.orderId = "文博动态";
        }
        this.$router
          .push({
            path: "/guanwugongkai/guanwugongkai2/:id",
            query: { orderId: this.orderId, zixun: this.sort }
          })
          .catch(err => {
            err;
          });
      }
      if (i == 5) {
        this.$router
          .push({
            path: "/guanwugongkai/dashiji/:id",
            query: { orderId: "大事记", zixun: true }
          })
          .catch(err => {
            err;
          });
      }
    }
  },
  watch: {
    $route(to, from) {
      if (
        to.query.zixun == "xinwenzixun" ||
        to.query.zixun == "huodonggonggao" ||
        to.query.zixun == "guanwugongkai" ||
        to.query.zixun == "wenbodongtai"
      ) {
        // this.currentPage = 1;
        // this.$refs.child.new();
        // this.$refs.child.setCurrentPageData();
        // this.new();
        // this.setCurrentPageData();
      }
    }
  }
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: #6e6e6e;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}

.bg_person {
  width: 100%;
  height: 100%;
  background: url("../../assets/image/show_bg2.png");
  background-repeat: no-repeat;
}
.gwgk.content {
  display: flex;

  color: #4e4b4b;
  width: 1200px;

  margin: auto;
  padding-top: 44px;
  box-sizing: border-box;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: #4e69a1;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
.gwgk .left {
  width: 195px;
  background: url("../../assets/image/left_nav.png") no-repeat;
}
.gwgk .left ul {
  padding: 30px;
  box-sizing: border-box;
}
.gwgk .left ul li {
  font-size: 18px;
  color: #6e6e6e;
  width: 140px;
  cursor: pointer;
  box-sizing: border-box;
}
.gwgk .left ul li:first-child {
  padding-top: 0px;
  padding-bottom: 16px;
}

.gwgk .left ul li span {
  display: inline-block;
  margin-left: 22px;
}
.gwgk .left ul li:not(:last-child) {
  border-bottom: 2px solid #9e9e9e;
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.gwgk .right {
  width: 940px;

  padding: 0 16px 0;
  box-sizing: border-box;
}

.gwgk .blue {
  color: #003567;
}
</style>
